<template>
  <div class="my">
    <div>
      <image v-if="userInfo.avatarUrl" class="userinfo-avatar" :src="userInfo.avatarUrl"></image>
    </div>
    <div>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </div>
    <image class="userinfo-avatar" :src="img"></image>
    <button type="primary" class="mg-t20" @click="selectImg()">上传</button>
    <button class="mg-t20 theme-bg" @click="sendMsg()">
      测试发送数据
    </button>
  </div>
</template>

<script>
import card from '@/components/card'
import Upyun from '@/utils/upyun-wxapp-sdk.js'
const upyun = new Upyun({
  bucket: 'ljimg',
  operator: 'rcpc',
  getSignatureUrl: 'http://localhost:8081/pub/getSignature'
  // getSignatureUrl: 'http://localhost:8088'
})
export default {
  data() {
    return {
      img: '',
      msg: '',
      motto: 'Hello World',
      userInfo: {
        avatarUrl: ''
      }
    }
  },

  components: {
    card
  },
  methods: {
    // 选择图片
    selectImg(argIndex) {
      console.log(argIndex)
      let chooseImage = new Promise((resolve, reject) => {
        let imgConfig = {
          count: 1,
          success: rs => {
            console.log(rs)
            return resolve(rs)
          },
          fail: err => {
            console.error(err)
            return reject(err)
          }
        }
        wx.chooseImage(imgConfig)
      })
      chooseImage.then(rs => {
        // console.log(rs, rs.tempFilePaths[0])
        const imageSrc = rs.tempFilePaths[0]
        let imgName = +new Date() + '.' + imageSrc.split('.').pop()
        upyun.upload({
          localPath: imageSrc,
          remotePath: '/rcpc/' + imgName,
          success: rs => {
            rs.data = JSON.parse(rs.data)
            wx.showToast({
              title: '上传成功',
              icon: 'success',
              duration: 1000
            })
            this.img = this.d.imgUrl + rs.data.url
          },
          fail: errMsg => {
            console.log('uploadImage fail, errMsg is', errMsg)
          }
        })
      })
    },
    getUserInfo(rs) {
      console.log(rs)
      // 获取openid
      let getOpenid = () => {
        let data = {
          code: this.d.code
        }
        this.http(
          this.H.getOpenid,
          data,
          rs => {
            console.log(rs)
            this.userInfo.openid = rs.data.d.openid
            wx.setStorageSync('userInfo', this.userInfo)
            console.log(this.userInfo)
          },
          err => {
            console.log(err)
          }
        )
      }
      if (rs && rs.target) {
        this.d.userInfo = rs.target.userInfo || {}
        this.d.userInfo.signature = rs.target.signature
        this.d.userInfo.encryptedData = rs.target.encryptedData
        this.userInfo = this.d.userInfo
        // 唯一标识
        this.userInfo.openid = ''
        this.login().then(
          rs => {
            getOpenid()
          },
          err => {
            console.log(err)
          }
        )
      }
    },
    clickHandle(msg, ev) {
      console.log('clickHandle:', msg, ev)
    },
    sendMsg() {
      this.sendMsg({})
    }
  },
  // 挂载结束状态
  mounted() {
    this.userInfo = wx.getStorageSync('userInfo') || {}
  },
  // 创建实例
  created() {
    console.log('created', this.version, wx.getStorageSync('userInfo'))
    // this.$http.get('/mock/18016/test').then(
    //   rs => {
    //     console.log(rs)
    //   },
    //   err => {
    //     console.log(err)
    //   }
    // )
  }
}
</script>

<style scoped lang='scss'>
.my {
  padding: 0 30px;
  text-align: center;
}
.userinfo-avatar {
  width: 64px;
  height: 64px;
}
</style>
